<template>
  <div>
      <NewUl v-for="(item, index) in list" :item = "item" :key = "index"/>

      <ul v-for="(item, index) in list" :key = "index">
          <li>{{ item.folder || item.file }}</li>


          <ul v-for="(items, indexs) in item.children" :key = "indexs">
              <li>{{ items.folder || items.file }}</li>


              <ul v-for="(itemss, indexss) in items.children" :key = "indexss">
                  <li>{{ itemss.folder || itemss.file }}</li>
              </ul>
          </ul>
      </ul>
  </div>
</template>

<script>
import NewUl from './NewUl'
export default {
    components: {
        NewUl
    },
    data() {
        return {
            list: [
                {
                    folder: 'public',
                    children: [
                        {
                            file: 'favicon.ico'
                        },
                        {
                            file: 'index.html'
                        }
                    ]
                },
                {
                    folder: 'src',
                    children: [
                        {
                            folder: 'assets',
                            children: [
                                {
                                    file: 'logo.png'
                                }
                            ]
                        },
                        {
                            folder: 'components',
                            children: [
                                {
                                    file: 'Com.vue'
                                },
                                {
                                    folder: 'subComponents',
                                    children: [
                                        {
                                            file: 'A.vue'
                                        },
                                        {
                                            file: 'B.vue'
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            file: 'App.vue'
                        },
                        {
                            file: 'main.js'
                        }
                    ]
                },
                {
                    file: 'README.md'
                },
                {
                    file: 'vue.config.js'
                }
            ]
        }
    }
}
</script>

<style>

</style>